<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>慢SQL统计</h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i>慢SQL统计</a></li>
        <li><a href="#"></i>慢SQL统计</a></li>
    </ol>
</section>
<!-- Main content -->
<section id="container" class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">

                <div class="box-header">
                    <form action="" id="query_Form">
                        <input name="begin" id="begin" type="hidden"/>
                        <input name="end" id="end" type="hidden"/>
                        <div class="row">

                            <div class="col-xs-3">
                                <label for="mycatName">查询条件:</label>
                                <div class="form-group">
                                    <select onchange="datasouce_change()" name="ds" id="datasource" class="form-control" style="width: 200px;">
                                    </select>
                                </div>
                            </div>

                            <div class="col-xs-3">
                                <label for="mycatName">SQL阀值:</label>
                                <div class="form-group">
                                    <input type="text" name="threshold" id="threshold" type="number"
                                           class="form-control" placeholder="慢SQL阀值，单位是毫秒">
                                </div>
                            </div>
                            <div class="col-xs-5">
                                <div class="form-group">
                                    <label for="mycatName">区间查询:</label>
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <input type="text" class="form-control pull-right"
                                               id="reservationtime">
                                    </div>
                                </div>
                            </div>

                        </div>

                    </form>

                </div>
                <div class="box-footer">
                    <div class="form-group">
                        <div class="col-lg-offset-3 col-lg-3">
                            <button class="btn btn-primary" onclick="queryForm('query_Form')">查询</button>
                            <!--<button class="btn btn-primary" onclick="resetBtn('query_Form')">重置</button>-->
                            <button class="btn btn-primary" onclick="setsqlslow()" type="button">阀值设置</button>
                            <!-- 	<button class="btn btn-primary"  onclick="exportcsv()" type="button">导出CSV</button> -->
                        </div>
                    </div>
                </div>

                <div class="box-body">
                    <div>
                        <table id="table"></table>
                        <div style="text-align: right;">
                            <div id="paginator"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<!-- /.content -->


<script type="text/javascript">
    $.AdminLTE.boxWidget.activate();
</script>

<script type="text/javascript">
    /**
     * 时间原型增加一个 format 函数
     */
    Date.prototype.format = function (fmt) {
        var o = {
            "M+": this.getMonth() + 1,                 //月份
            "d+": this.getDate(),                    //日
            "h+": this.getHours(),                   //小时
            "m+": this.getMinutes(),                 //分
            "s+": this.getSeconds(),                 //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
    var datasouce_change = function () {
        var daterange = $('#reservationtime').val().split('~');
        var begin = daterange[0].trim();
        var end = daterange[1].trim();
        $('#begin').val(begin);
        $('#end').val(end);
        //queryForm('query_Form');
    }
    //Date range picker with time picker
    $('#reservationtime').daterangepicker(
        {
            maxDate: moment(), //最大时间
            showDropdowns: true,
            showWeekNumbers: false, //是否显示第几周
            timePicker: true, //是否显示小时和分钟
            timePickerIncrement: 60, //时间的增量，单位为分钟
            timePicker12Hour: false, //是否使用12小时制来显示时间
            ranges: {
                //'最近1小时': [moment().subtract('hours',1), moment()],
                '今日': [moment().startOf('day'), moment()],
                '昨日': [
                    moment().subtract('days', 1).startOf(
                        'day'),
                    moment().subtract('days', 1).endOf(
                        'day')],
                '最近7日': [moment().subtract('days', 6),
                    moment()],
                '最近30日': [moment().subtract('days', 29),
                    moment()]
            },
            opens: 'right', //日期选择框的弹出位置
            format: 'YYYY-MM-DD HH:mm', //控件中from和to 显示的日期格式
            separator: ' to ',
            locale: {
                applyLabel: '确定',
                cancelLabel: '取消',
                fromLabel: '起始时间',
                toLabel: '结束时间',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五',
                    '六'],
                monthNames: ['一月', '二月', '三月', '四月', '五月',
                    '六月', '七月', '八月', '九月', '十月', '十一月',
                    '十二月'],
                firstDay: 1
            }
        });


    $("#reservationtime").on('apply.daterangepicker', function () {
        var daterange = $('#reservationtime').val().split('~');
        var begin = daterange[0].trim();
        var end = daterange[1].trim();
        $('#begin').val(begin);
        $('#end').val(end);
        queryForm('query_Form');
    });
    var setsqlslow = function () {
        var thresholdVal = $('#threshold').val();
        if (thresholdVal == '') {
            alert("请输入阀值！");
            return;
        }
        var rainbow = new Rainbow();
        rainbow.setService("showService");
        rainbow.setMethod("setsqlslow");
        rainbow.setParam("ds", $('#datasource').val());
        rainbow.setParam("threshold", thresholdVal);
        rainbowAjax.query(rainbow, new function () {
            this.onSuccess = function (data) {
                try {

                    if (data.success) {
                        alert("设置阀值成功！");
                    }
                } catch (e) {
                    //alert(e);
                }
            };
            this.onFail = function (jqXHR, textStatus, errorThrown) {
            };
        });
    }
    var exportcsv = function () {
        var url = "./dispatcherAction/exportCSV.do?service=showService&method=sqlslow&ds=" + $('#datasource').val() + "&threshold=" + $('#threshold').val() + "&fileName=sqlslow";
        window.location = url;
    }
    var Selected_Callback = function (target_select) {
        this.onSuccess = function (data) {
            try {
                var j_obj = data;
                if (j_obj.success) {
                    var length = j_obj.rows.length;
                    for (var i = 0; i < length; i++) {
                        var mycatName = j_obj.rows[i].mycatName;
                        $("#" + target_select).append("<option value=\"" + mycatName + "\">" + mycatName + "</option>");
                        if (i == 0) {
                            datasouce_change();
                        }
                    }
                }
            } catch (e) {
                alert("异常!")
            }
        };
        this.onFail = function (jqXHR, textStatus, errorThrown) {
        };
    };
    var initDataSouce = function () {
        var rainbow = new Rainbow();
        rainbow.setService("mycatService");
        rainbow.setMethod("query");
        rainbowAjax.query(rainbow, new Selected_Callback("datasource"));
    };
    $(document).ready(function () {
        initDataSouce();
        var cols = [
            {title: '用户', name: 'USER', width: 80, align: 'left'},
            {title: '节点', name: 'DATASOURCE', width: 100, align: 'left'},
            {
                title: '开始时间', name: 'START_TIME', width: 170, align: 'left', sortable: true,
                renderer: function (val) {
                    console.debug("vv:" + val);
                    var d = new Date(val).format("yyyy-MM-dd hh:mm:ss");
                    ;
                    return d;
                }
            },
            {title: '执行时间', name: 'EXECUTE_TIME', width: 100, align: 'left', sortable: true, type: 'number'},
            {title: 'IP', name: 'IPAddr', width: 160, align: 'left', sortable: true},
            {title: 'SQL', name: 'SQL', width: 600, align: 'left'}
        ];
        mmgrid = $('#table').mmGrid({
            indexCol: true,
            height: '400',
            indexColWidth: 35,
            cols: cols,
            url: './dispatcherAction/queryByMMGrid.do?service=showService&method=sqlslow',
            method: 'post',
            //params: function(){return $('#query_Form').serializeJson();},
            params: function () {
                var daterange = $('#reservationtime').val().split('~');
                var begin = daterange[0].trim();
                var end = daterange[1].trim();
                if ($('#threshold').val().length > 0) {
                    return {ds: $('#datasource').val(), begin: begin, end: end, threshold: $('#threshold').val()};
                } else {
                    return {ds: $('#datasource').val(), begin: begin, end: end};
                }

                //return $('#query_Form').serializeJson();
            },
            root: 'items',
            plugins: [
                //配置当前grid默认的分页大小以及总记录数的名称
                $('#paginator').mmPaginator({limit: 20, totalCountName: 'totalCount'})
            ]
        });
    });
    $.fn.serializeJson = function () {

        var serializeObj = {}; // 目标对象
        var array = this.serializeArray(); // 转换数组格式
        // var str=this.serialize();
        $(array).each(function () { // 遍历数组的每个元素 {name : xx , value : xxx}
            if (serializeObj[this.name]) { // 判断对象中是否已经存在 name，如果存在name
                if ($.isArray(serializeObj[this.name])) {
                    serializeObj[this.name].push(this.value); // 追加一个值 hobby : ['音乐','体育']
                } else {
                    // 将元素变为 数组 ，hobby : ['音乐','体育']
                    serializeObj[this.name] = [serializeObj[this.name], this.value];
                }
            } else {
                serializeObj[this.name] = this.value; // 如果元素name不存在，添加一个属性 name:value
            }
        });
        return serializeObj;
    };
</script>
